<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="resources/templates/mainTemplate.xhtml">

    <ui:param name="pagetitle" value="CHUMS - Account Settings"/>

    <ui:define name="centerContent" class="turquaz"> 

        <p:ajaxStatus onstart="statusDialog.show();" onerror="statusDialog.hide();" onsuccess="statusDialog.hide();"/>  

        <p:dialog appendToBody="true" resizable="false" modal="true" widgetVar="statusDialog" header="Loading"   
                  draggable="false" closable="false">  
            <p:graphicImage value="resources/images/ajax-loader.gif" />
        </p:dialog> 

        <center>
            <h:form  id="formUserAccount" prependId="false" >
                <p:fieldset legend="Account Settings">  
                    <h:panelGrid columns="1"  cellpadding="10"> 
                        <p:growl id="growlUserAccount"  showDetail="true" showSummary="false" life="5000" redisplay="false" />  
                        <p:dataTable id="userAccountTableID" 
                                     var="user" 
                                     value="#{loginBean.user}" 
                                     paginator="false" 
                                     rows="1"
                                     rowKey="#{user.id}"
                                     emptyMessage="No Rows"
                                     editable="true">
                                         
                            <p:ajax event="rowEdit" update="@this :formUserAccount:growlUserAccount" listener="#{userBean.onEditRow}"></p:ajax>
                                
                            <f:facet name="header">
                                <h:outputText value="Account Update" />
                            </f:facet>
                                
                            <p:column sortBy="#{user.id}" 
                                      headerText="ID" 
                                      width="40"
                                      >
                                          
                                <f:facet name="header">
                                    <h:outputText value="ID" />
                                </f:facet>
                                    
                                <h:outputText value="#{user.id}" />
                            </p:column>
                                
                            <p:column sortBy="#{user.username}" 
                                      headerText="Username" 
                                      width="100"
                                      >
                                          
                                <f:facet name="header">
                                    <h:outputText value="Username" />
                                </f:facet>
                                    
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{user.username}" />  
                                    </f:facet>  
                                    <f:facet name="input">  
                                        <p:inputText id="username" value="#{user.username}"  style="width:100%">
                                        </p:inputText>
                                    </f:facet>  
                                </p:cellEditor>  
                            </p:column>
                                
                            <p:column sortBy="#{user.name}" 
                                      headerText="Name" 
                                      width="100"
                                      >
                                          
                                <f:facet name="header">
                                    <h:outputText value="Name" />
                                </f:facet>
                                    
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{user.name}" />  
                                    </f:facet>  
                                    <f:facet name="input">  
                                        <p:inputText  id="nameUser" value="#{user.name}"  style="width:100%">
                                        </p:inputText>
                                    </f:facet>  
                                </p:cellEditor>  
                            </p:column>
                                
                            <p:column sortBy="#{user.email}" 
                                      headerText="Email" 
                                      >
                                          
                                <f:facet name="header">
                                    <h:outputText value="Email" />
                                </f:facet>
                                    
                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{user.email}" />  
                                    </f:facet>  
                                    <f:facet name="input">  
                                        <p:inputText id="email" value="#{user.email}"  style="width:100%">
                                        </p:inputText>
                                    </f:facet>  
                                </p:cellEditor>  
                            </p:column>
                                
                            <p:column sortBy="#{user.averageRating}" 
                                      headerText="Average Rating" 
                                      width="40"
                                      >
                                          
                                <f:facet name="header">
                                    <h:outputText value="Average Rating" />
                                </f:facet>
                                    
                                <h:outputText value="#{user.averageRating}" />
                            </p:column>
                                
                            <p:column
                                headerText="Update" 
                                width="50">  
                                    
                                <p:rowEditor />  
                            </p:column>
                                
                            <p:column headerText="Delete Account" 
                                      >  
                                          
                                <p:commandButton style="align: center"  type="button" icon="ui-icon-close" 
                                                 onclick="confirmation.show()">
                                </p:commandButton>
                                    
                            </p:column>  
                                
                        </p:dataTable>
                            
                    </h:panelGrid>  
                </p:fieldset>
            </h:form>         
                
            <p:confirmDialog appendToBody="true" id="confirmDialog" message="Are you sure you want to delete your account?" header="Delete Account" severity="alert" widgetVar="confirmation">  
                <h:form>
                    <center>
                        <p:commandButton id="confirm" value="Yes" update="@this" oncomplete="confirmation.hide();" action="#{userBean.removeUser}" />  
                        <p:commandButton id="decline" value="No" onclick="confirmation.hide()" type="button" />   
                    </center>
                </h:form>
            </p:confirmDialog> 
                        
            <br/>
            <br/>
                
            <h:form  id="formUserPassword" prependId="false" >
                <p:fieldset legend="Password Settings">    
                    
                    <p:growl id="growlUserPassword"  showDetail="true" showSummary="false" life="5000" />
                    <br/>
                    <center>
                        <h:panelGrid columns="2" style="padding: 10px; margin-top: -30px;">
                            <p:panel header="Change Password" style="height: 131px; border: darkgrey dashed thin;">
                                <br/>
                                
                                Password: <p:password id="password" value="#{userBean.user.password}"/>
                                <p:message for="password" />
                                    
                                Password (Again) <p:password id="password2" value="#{userBean.password2}"/>
                                <p:message for="password2" />
                        
                                
                            <p:commandButton value="Update password" 
                                             style="float:right; font-size: 11px;" 
                                             actionListener="#{userBean.changePassword}"
                                             update="@this :formUserPassword:growlUserPassword"
                                             />
                        </p:panel>
                    </h:panelGrid>
                </center>
                </p:fieldset>    
                
            </h:form>
        </center>

    </ui:define>

    <ui:define name="leftContent" class="turquaz">

        <ui:include src="settingsLeftPanel.xhtml" />

    </ui:define> 


</ui:composition>

